<template>
  <div class="label-box" :style="{'background-color':colorlists[Math.floor(Math.random()*10)]}">{{text}}</div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "label",
  props:['text'],
  setup() {
    const colorlists = [

      'rgb(229, 0, 19)',

      'rgb(206,194,28)',

      'rgb(0,161,233)',

      'rgb(109,185,45)',

      'rgb(166,0,130)',

      'rgb(237,108,0)',

      'rgb(240, 28, 131)',

      'rgb(84, 21, 226)',

      'rgb( 0,128,0)',

      'rgb( 255,69,0)',

      'rgb( 255,165,0)',

      'rgb( 178,34,34)',

      'rgb( 255,0,255)',

      'rgb(65,105,225)',

      'blueviolet'

    ]

    return {
      colorlists
    }
  }
}
</script>

<style scoped>

  .label-box {
    margin: 1px;
    height: 12px;
    width: fit-content;
    border-radius: 10px;
    padding: 3px;
    font-size: small;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
</style>